<!-- home -->
<template>
  <div class="index-container">
    <van-notice-bar mode="link" left-icon="volume-o" :scrollable="false" v-show="notifyList.length > 0"
                    @click="toNotify">
      <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item class="ellipsis-1" v-for="item in notifyList" :key="item.id">{{ item.msg }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <!--    <van-tag class="text-tag" type="danger" size="large">测试版</van-tag>-->

    <div class="warpper">

      <div class="main-box">
        <img src="~@/assets/img/main-title.png" alt="" class="main-title"/>
      </div>
      <div>
        <van-grid :column-num="2" :border="false">
          <van-grid-item to="PersonalCenter" style="padding-left: 50px">
            <img src="~@/assets/img/chbm.png" class="func-img" alt=""/>
            <p class="func-text">参会报名</p>
          </van-grid-item>
          <!--          -->
          <van-grid-item to="RcapPage" style="padding-right: 50px">
            <img src="~@/assets/img/rcap.png" class="func-img" alt=""/>
            <p class="func-text">日程安排</p>
          </van-grid-item>
        </van-grid>
        <van-grid :column-num="3" :border="false">
          <van-grid-item to="HqfwPage">
            <img src="~@/assets/img/hqfw.png" class="func-img"/>
            <p class="func-text">后勤服务</p>
          </van-grid-item>
          <van-grid-item to="FyzyPage">
            <img src="~@/assets/img/fyzy.png" class="func-img" alt=""/>
            <p class="func-text">防疫指引</p>
          </van-grid-item>
          <van-grid-item url="http://www.foshan.gov.cn/zjfs/index.html">
            <img src="~@/assets/img/fsjs.png" class="func-img"/>
            <p class="func-text">佛山介绍</p>
          </van-grid-item>
        </van-grid>
        <van-grid :column-num="3" :border="false">
          <van-grid-item to="DhzxList">
            <img src="~@/assets/img/dhzx.png" class="func-img"/>
            <p class="func-text">大会资讯</p>
          </van-grid-item>
          <van-grid-item to="CzznPage">
            <img src="~@/assets/img/czzn.png" class="func-img" alt=""/>
            <p class="func-text">操作指南</p>
          </van-grid-item>
          <van-grid-item to="RczcList">
            <img src="~@/assets/img/rczc.png" class="func-img"/>
            <p class="func-text">人才政策</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCookie } from '@/utils/tokenUtil'
import { decryptAes } from '@/utils/encryptUtil'
import { getDoctorMsgPag } from '@/api/user'

export default {
  data() {
    return {
      notifyList: []
    }
  },

  computed: {},

  mounted() {
    this.getNotify()
  },

  methods: {
    getNotify() {
      let tel = getCookie('tel')
      if (tel) {
        let decrypt = JSON.parse(decryptAes(tel))
        getDoctorMsgPag({ pageNo: 1, pageSize: 3, tel: decrypt.tel }).then(res => {
          let data = JSON.parse(res.data)
          this.notifyList = data.list
        })
      }
    },
    toNotify() {
      this.$router.push({ name: 'NotifyManager' })
    },
    showMsg() {

      this.$dialog.alert({
        message: '因大赛延期举行，本栏目内容后续会更新，敬请期待。',
        theme: 'round-button'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-grid-item__content {
  background-color: transparent !important;
  padding: 0;
  padding-top: 10px;
}

/deep/ .notice-swipe {
  height: 40px;
  line-height: 40px;
}

.index-container {
  height: 100vh;
  background: url('~@/assets/img/index-bg.png') center center no-repeat;
  background-size: 100% 100%;
  overflow: scroll;

  .warpper {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .main-box {
      text-align: center;

      .main-title {
        width: 60%;
      }
    }

    .func-img {
      width: 75px;
      height: 75px;
    }

    .func-text {
      font-size: 12px;
      color: white;
      margin-top: 2px;
      font-weight: bold;
    }
  }
}
</style>
